<template>
    <Select :value="value" @on-change="handleChange" class="width-100p" :placeholder="placeholder" clearable filterable>
        <Option :key="city.id" :value="city.region_code" v-for="city in allCities">{{city.name}}</Option>
    </Select>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'city-code-selector',
  props: {
    value: [Number, String],
    placeholder: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      cities: []
    }
  },
  computed: {
    ...mapGetters(['allCities'])
  },
  methods: {
    handleChange (val) {
      this.$emit('input', val)
    }
  }
}
</script>